<template>
    <div class="page-container">
        <layout-background />
        <div class="page-error404">
            <div class="landing-bg-wrap">
                <span v-for="item in list" :key="item.id" :style="item.style"></span>
            </div>
            <div class="content">
                <div class="hint-box">
                    <div class="hint-en">Page not found</div>
                    <div class="hint-cn">页面不见了!</div>
                </div>
                <div class="img-box">
                    <img src="../assets/image/404.png" />
                </div>
                <div class="btn-box">
                    <el-button
                        plain
                        round
                        color="#606f7b"
                        :size="isCollapse ? 'small' : 'default'"
                        @click="goback(1)"
                    >
                        返回上一页
                    </el-button>
                    <el-button
                        plain
                        round
                        color="#606f7b"
                        :size="isCollapse ? 'small' : 'default'"
                        @click="goback"
                    >
                        返回主页
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getCurrentInstance, ref, computed, reactive } from 'vue';

export default {
    name: 'Error404',
    setup() {
        const { proxy } = getCurrentInstance();
        const utils = proxy.$utils;

        const goback = (i) => {
            if (i == 1) {
                proxy.$router.back();
            } else {
                proxy.$router.push({ name: 'Home' });
            }
        };
        // 计算属性
        const isCollapse = computed(() => {
            return proxy.$store.state.collapse;
        });
        // 监听窗口
        const initResize = () => {
            if (document.body.offsetWidth <= 768) {
                proxy.$store.commit('updateCollapseStatus', true);
            } else {
                proxy.$store.commit('updateCollapseStatus', false);
            }
        };

        window.addEventListener('resize', () => {
            initResize();
        });

        initResize();

        /* 流星雨 */
        let list = reactive([]);

        for (let i = 0; i < 100; i++) {
            let right = utils.randomInteger(10, 1800);
            let delay = utils.RandomDecimal(0, 1);
            let duration = utils.RandomDecimal(0.3, 1);
            let opacity = utils.RandomDecimal(0.3, 0.6); // 下雨效果用这个
            let style = `right:${right}px;animation-delay:${delay}s;animation-duration:${duration}s;opacity:${opacity};`;

            list.push({
                id: i + 1,
                style
            });
        }

        return { list, isCollapse, goback };
    }
};
</script>

<style lang="less">
// 手写下雨效果
.page-error404 {
    height: 100%;
    overflow: hidden;
    .landing-bg-wrap {
        height: 100%;
        position: relative;

        span {
            position: absolute;
            top: -30px;
            left: initial;
            width: 1px;
            height: 30px;
            background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.6));
            filter: blur(1px);
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
            transform: rotate(-15deg);
            animation: animate 3s linear infinite;

            @keyframes animate {
                0% {
                    transform: rotate(-15deg) translateY(0);
                    opacity: 1;
                }
                70% {
                    opacity: 1;
                }
                100% {
                    transform: rotate(-15deg) translateY(880px);
                    opacity: 0;
                }
            }
        }
    }
}

.content {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .hint-box,
    .img-box,
    .btn-box {
        text-align: center;
        color: rgba(255, 255, 255, 0.8);
    }
}

@media (min-width: 800px) {
    .content {
        .img-box {
            img {
                max-width: 500px;
            }
        }
        .hint-box {
            .hint-en {
                font-size: 16px;
            }
            .hint-cn {
                font-size: 22px;
            }
        }
    }
}

@media (max-width: 800px) {
    .content {
        .img-box {
            img {
                max-width: 200px;
            }
        }
        .hint-box {
            .hint-cn {
                font-size: 19px;
            }
        }
    }
}

// // 流星雨背景
// .landing-bg-wrap {
//     height: 100%;
//     position: relative;

//     span {
//         position: absolute;
//         top: 0;
//         left: initial;
//         width: 4px;
//         height: 4px;
//         background: #fff;
//         border-radius: 50%;
//         box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1), 0 0 0 8px rgba(255, 255, 255, 0.1),
//             0 0 20px rgba(255, 255, 255, 1);
//         animation: animate 3s linear infinite;

//         &::before {
//             content: '';
//             position: absolute;
//             top: 50%;
//             transform: translateY(-50%);
//             width: 300px;
//             height: 1px;
//             background: linear-gradient(90deg, #fff, transparent);
//         }

//         @keyframes animate {
//             0% {
//                 transform: rotate(315deg) translateX(0);
//                 opacity: 1;
//             }
//             70% {
//                 opacity: 1;
//             }
//             100% {
//                 transform: rotate(315deg) translateX(-1200px);
//                 opacity: 0;
//             }
//         }
//     }
// }
</style>
